<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item
      v-for="(item, index) in recipesSwipePhotoList"
      :key="index"
      @click="selectSwipeFood(index)"
    >
      <img :src="item.url" />
    </van-swipe-item>
  </van-swipe>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { showNotify, closeNotify } from "vant";
import "vant/es/notify/style";

const { proxy } = getCurrentInstance();
let recipesSwipePhotoList = ref([]);

onMounted(() => {
  proxy.$http("/foodData").then((res) => {
    recipesSwipePhotoList.value = res.data;
  });
});

const selectSwipeFood = (index) => {
  showNotify({ type: "warning", message: "该功能未完善" });
  setTimeout(() => {
    closeNotify();
  }, 3000);
  return;
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  text-align: center;
}

.my-swipe .van-swipe-item img {
  display: block;
  width: 100%;
}
</style>